<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.*" %>
<%@ page import="com.shurdroides.sintesi.*" %>
<%@ page import="com.google.appengine.api.users.User" %>
<%@ page import="com.google.appengine.api.users.UserService" %>
<%@ page import="com.google.appengine.api.users.UserServiceFactory" %>
<%@ page import="javax.persistence.EntityManager" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Evolution</title>
<link rel="StyleSheet" type="text/css" href="style.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

//Create an object containing LatLng, population.
var citymap = {};

<%
List users = new ArrayList();
users = (ArrayList)request.getAttribute("users");
for(int i=0; i<users.size();i++){
	UserMap c = (UserMap)users.get(i);	
%>	

citymap['<%=c.name%>'] = {
		  center: new google.maps.LatLng(<%=c.lat%>, <%=c.lon%>),
		  population: <%=c.points%>,
		  name: '<%=c.name%>'
		};
<%
}
%>
var cityCircle;

  function initialize() {
	var latlng = new google.maps.LatLng(41.739, 1.958);
    var myOptions = {
      zoom:6,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    for (var city in citymap) {
        // Construct the circle for each value in citymap. We scale population by 20.
        var populationOptions = {
          strokeColor: "#FF0000",
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: "#FF0000",
          fillOpacity: 0.35,
          map: map,
          center: citymap[city].center,
          radius: (citymap[city].population +1)*10
        };
        var marker = new google.maps.Marker({
            position: citymap[city].center,
            map: map,
            title: citymap[city].name
        });
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
          });
       
        cityCircle = new google.maps.Circle(populationOptions);
      }
  }

  
  
</script>
</head>
<body onload="initialize()">

<div class="top-bar-wrap">
  <div id="top-bar" class="mod-con">
    <div class="search">
      <input type="text" value="Buscar..." name="" />
      <button type="submit" class="btn">OK</button>
    </div>
    <div class="rft"><a href="#" class="rss"></a><a href="#" class="facebook"></a><a href="#" class="twitter"></a></div>
  </div>
</div>
<div class="main-bg">
  <div id="home-page" class="main-wrap">
    <div id="header" class="mod-con">
      <h1 id="logo"><a href="#"><img src="image/logo_en.png" alt="" /></a></h1>
      <ul id="main-menu">
        <li><a href="home.jsp"><strong>Inici</strong></a></li>
        <li><a href="/MainServlet?action=7"><strong>Mapa</strong></a></li>
        <li><a href="ranking.jsp"><strong>Ranking</strong></a></li>
        <li><a href="contact.jsp"><strong>Contacte</strong></a></li>
      </ul>
    </div>
   
</div>
 <div id="main" class="mod-con">
      <div class="container clearfix">
        <div id="about-page" class="main-con">
          <div class="content">
          <p><strong>MAPA D'USUARIS DE L'APLICACIÓ</strong></p>
<div id="map_canvas" style="width:900px; height:600px"></div>
</div>
</div>

</div>
<div class="footer-wrap">
 <p><img src="image/android_logo.gif" alt="" width="150px" height="150px"/></p>
<p>Para Android</p>
</div>
</body>
</html>
